<template>
<view>

	<view class="u-p-l-20 u-p-r-20" v-if="commenttitle!=''">
	<u-divider :text="commenttitle" :hairline="true"></u-divider>
	</view>
	<view class="u-padding-20" v-if="showmode=='full'||showmode=='onlyinput'" style="overflow: hidden;" @click="toggleMask('show')">
		<view class="u-p-l-20 u-p-r-20" style="border: 3px #004884 solid;border-radius: 6px;">
			<u--input :placeholder="placeholder" type="text" border="0" @focus="toggleMask('show')"></u--input>
		</view>
	</view>

	<view v-if="showmode=='full'||showmode=='onlylist'">
		<u-empty :text="'暂无回复'" mode="data"  icon="https://i.yodin.com/storage/empty/msg.png" :show="empty"></u-empty>
		<view class=" u-padding-20"  v-for="(res, index) in commentList" :key="index" v-if="commentList.length>0">
			<view class=" b-b u-p-b-20">
			<view class="comment">
			<view class="left"><image :src="res.avatar" mode="aspectFill"></image></view>
			<view class="right">
				<view class="top">
					<view class="name">
					{{ res.showname }}
					<span class="u-primary u-p-l-20" v-if="res.group_names!=null&&res.group_names!=''">{{res.group_names}}</span>
					</view>
					<view v-if="res.poored>0"><u-rate :value="res.poored" readonly size="small"></u-rate></view>
					<view class="like" :class="{ highlight: res.isLike }">
						<view class="num u-m-l-30">{{ res.likeNum }} </view>
						<u-icon v-if="!res.isLike" name="thumb-up" :size="30" color="#9a9a9a" @click="getLike(index,res.remark_id)"></u-icon>
						<u-icon v-if="res.isLike" name="thumb-up-fill" :size="30" @click="getLike(index,res.remark_id)"></u-icon>
					</view>
				</view>
				<view class="content">
					<u-parse :content="res.replycontent"></u-parse>
				</view>
				<view class="reply-box" v-if="res.allReply>0">
					<view class="item" v-for="(item, index) in res.replyList" :key="item.index">
						<view class="username">{{ item.showname }}</view>
						<view class="text"><u-parse :content="item.contentStr"</u-parse></view>
					</view>
					<view class="all-reply" @tap="toAllReply" v-if="res.replyList != undefined">
						{{ res.allReply }}{{$t('reply')}}
						<u-icon class="more" name="arrow-right" :size="26"></u-icon>
					</view>
				</view>
				<view class="bottom">
					{{res.add_time}}
					<!--view class="reply">回复</view-->
				</view>
			</view>
			</view>
			<view class="album u-flex" v-if="res.images&&res.images.length>0">
				<view class="left"></view>
				<view class="album__content">
				<u-album :urls="res.images" rowCount="4" maxCount="8"></u-album>
				</view>
			</view>
			<view class=" u-padding-20" v-if="res.reply">
				<view class="comment">
					<view class="left" style="width:30px"></view>
					<view class="right u-p-t-12 u-p-b-12" style="border:dotted #dddddd 1px;font-size:12px;border-radius:8px;">
					<view style="color:#cccccc;">{{$t('管理员回复')}}</view>
					<view>
						<u-parse :content="res.reply" :selectable="true"></u-parse>
					</view>
					</view>
				</view>
			</view>
			</view>
		</view>
		<view v-if="commentList.length > 0">
			<u-loadmore :status="loadStatus" @loadmore="getComment"></u-loadmore>
		</view>
		<u-gap height="20"></u-gap>
	</view>
		
	
	<view class="mask" :class="maskState===0 ? 'none' : maskState===1 ? 'show' : ''" @click="toggleMask">
		<view class="mask-content" @click.stop.prevent="stopPrevent">
			<view class="mask-content-topbar">
				<view class="left" @click="toggleMask">{{$t('cancel')}}</view>
				<view  class="right" >
				<u-button class="btn" type="primary"  @click="pubComment" :disabled="loadstatus" :loading="loadstatus" loadingText="login..">{{$t('reply')}}</u-button>
				</view>
			</view>
			<view class="mask-content-input u-padding-20">
				<!--u-rate :count="5" :value="5" v-model="commentrate" size="42rpx" inactive-color="#CCC" active-color="#F9BE0D" gutter="2"></u-rate-->
				
				<uni-rate v-model="commentrate" @change="changerate"/>
				<u-gap height="10"></u-gap>
				<textarea class="textarea"
					v-model="content"
					:placeholder="userInfo.token?placeholder:$t('nologin')"
					:cursor-spacing = "100"
					:show-confirm-bar = "false"
					:focus="focus"
					maxlength="140"
					:disabled="userInfo.token?false:true"
					></textarea>
			</view>
			<view class="u-p-l-20 u-p-r-20">
					<u-upload 
						:fileList="fileList9"
						@afterRead="afterRead"
						maxCount="5"
						@delete="deletePic"
						multiple
						name="9"
						width="60"
						height="60">
					</u-upload>
			</view>
			<u-gap height="80"></u-gap>
		</view>
	</view>
</view>
</template>

<script>
	
	import { mapState, mapMutations } from "vuex";
	import base from "@/config/baseUrl";
	import { uploadFilePromise } from '@/plugins/upload/upload';
	import { api_remark_add,api_remark_like,api_remark_list } from '@/config/api.js';
	import uniRate from "@/components/ygc-comment/uni-rate.vue";
	
	export default {
		components:{
			uniRate
		},
		name: "ygcComment",
		//属性
		props: {
			placeholder: {
				type: String
			},
			root_id:'',
			related_id:'',
			module:{
                type: String,
                default: ''
            },
			//full 全部功能  onlyinput只有评论框 onlylist 只显示列表
			showmode:{
                type: String,
                default: 'full'
            },
			labelPosition:{
				type:String
			},
			commenttitle:{
				type:String,
				default:''
			}
		},
		data() {
			return {
				maskState: 0,
				content: '',
				focus: false,
				  loadStatus: "loadmore",
				  loadstatus: false,
				  empty:false,
				  loadstxt: "loading...",
				  commentContent: '',
				  quoteid:'',
				  commentList: [],
				  page:1,
				  fileList9: [],
				  commentrate:0
			};
		},
		created() {
			setTimeout(() => {
				this.getComment()
			}, 50);
		},
		computed: {
			...mapState(["userInfo"]),
		},
		mounted(){
			var that=this;
			uni.$once('onReachBottom',function(data){
				console.log("触底")
			    that.getComment()
			})  
		},
		methods: {
		changerate(e){
			console.log(e,this.commentrate)
		},
		// 跳转到全部回复
		toAllReply() {
			
		},
		// 点赞
		getLike(index,id) {
			this.commentList[index].isLike = !this.commentList[index].isLike;
			if (this.commentList[index].isLike == true) {
				this.commentList[index].likeNum++;
			} else {
				this.commentList[index].likeNum--;
			}
			api_remark_like({
				reply_id:id,
				islike:this.commentList[index].isLike==true?'1':'0'
			}).then((res) => {}).catch((e) => {});
		},
			stopPrevent(){
			},
			toggleMask(type){
				let timer = type === 'show' ? 10 : 300;
				let	state = type === 'show' ? 1 : 0;
				// this.maskState = 2;
				console.log(type)
				setTimeout(()=>{
					this.maskState = state;
					// #ifdef APP-PLUS
					// 安卓app软键盘自动弹出有点问题，暂时还没有很好的解决方案，所以就禁止安卓app软键盘自动弹出，如果哪位朋友有好的解决方案可以在评论里告诉大家参考一下
					if (uni.getSystemInfoSync().platform == "ios") {
						this.focus = this.maskState ? true : false;
					}
					// #endif
					// #ifndef APP-PLUS
					this.focus = this.maskState ? true : false;
					// #endif
				}, timer)
			},
			pubComment() {
				let images = []
				this.fileList9.map((item) => {
					images.push({
						...item.url,
						status: 1
					})
				})
				this.loadstatus = true;
					api_remark_add({
								rootid:this.root_id,
								related_id:this.related_id,
								module:this.module,
								replycontent:this.content,
								quoteid:this.quoteid,
								poored:this.commentrate,
								imgs:JSON.stringify(images)
					}).then((res) => {
						console.log('回复ok')
							this.$emit('change', []);
							this.empty=false

							this.commentList.unshift(res);
							  for (let i = 0; i < this.commentList.length; i++) {
								if(i==0){
									this.commentList[i].replycontent=this.commentList[i].replycontent+' '+this.$t('visible2review')
									this.commentList[i].add_time='Now'
								}
							  }
							this.toggleMask();
							this.content = '';
							this.loadstatus = false;
							
					}).catch((e) => {this.loadstatus = false;});
			},

			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: this.$t('uploading')
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await uploadFilePromise(lists[i].url,2)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},

		
			
			
		// 评论列表
		getComment() {
			console.log('list')
			api_remark_list({
					rootid:this.root_id,
					module:this.module,
					page: this.page
				}).then((res) => {
					console.log('result',res)
 				  if (res.count > 0) {
					  this.empty=false
					let list = res.reply;
					if (this.page <= res.pages) {
					  for (let i = 0; i < list.length; i++) {
						this.commentList.push(list[i]);
					  }
					  if (this.page == res.pages) {
						this.loadStatus = "nomore";
					  }
					  this.page += 1;
					} else {
					  this.loadStatus = "nomore";
					}

					//
					
				  } else {
					this.commentList = [];
					this.empty=true
					this.loadStatus = "nomore";
				  }
				this.loadstatus=false
			}).catch((e) => {console.log(e)});
		}
		}
	}
</script>

<style lang="scss" scoped>
	$font-color-base: #606266;
	$base-color: #5A9BEC;
	.mask{
		display: flex;
		align-items: flex-end;
		position: fixed;
		left: 0;
		top: var(--window-top);
		bottom: 0;
		width: 100%;
		background: rgba(0,0,0,0);
		z-index: 10;
		transition: .3s;
		-webkit-transition: .3s; 
		.mask-content{
			width: 100%;
			background: #FFFFFF;
			transform: translateY(100%);
			transition: .3s;//底部弹出的持续时间
			-webkit-transition: .3s;//底部弹出的持续时间 
			// overflow-y:scroll;
			display: flex;
			flex-direction: column;
			.mask-content-topbar{
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				padding: 20upx 30upx 10upx;
				font-size: 32upx;
				.left{
					padding: 10upx 0upx;
					color: $font-color-base;
				}
				.right{
					.btn{
						padding: 30upx 100upx;
						border-radius: 6upx;
						color: #FFFFFF;
						font-weight: 500;
						background-color: $base-color;
					}
				}
			}
			.mask-content-input{
				width: 100%;//如果textarea的宽带有问题可以把width改为100%试试
				// width: 100%;
				.textarea {
					height: 100px;
					width: 100%;//如果textarea的宽带有问题可以把width改为100%试试
					// width: 100%;
					padding: 16upx;
					border:2upx solid #d5d5d6;
					border-radius: 8upx;
				}
			}
		}
		&.none{
			display: none;
		}
		&.show{
			background: rgba(0,0,0,.4);
			.mask-content{
				transform: translateY(0);
			}
		}
	}
.comment {
	display: flex;
	width: 100%;
	.left {
		image {
			width: 64rpx;
			height: 64rpx;
			border-radius: 50%;
			background-color: #f2f2f2;
		}
	}
	.right {
		flex: 1;
		padding-left: 20rpx;
		font-size: 30rpx;
		.top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.name {
				color: #5677fc;
			}
			.like {
				display: flex;
				align-items: center;
				color: #9a9a9a;
				font-size: 26rpx;
				.num {
					margin-right: 4rpx;
					color: #9a9a9a;
				}
			}
			.highlight {
				color: #5677fc;
				.num {
					color: #5677fc;
				}
			}
		}
		.content {}
		.reply-box {
			background-color: rgb(242, 242, 242);
			border-radius: 12rpx;
			.item {
				padding: 20rpx;
				border-bottom: solid 2rpx $u-border-color;
				.username {
					font-size: 24rpx;
					color: #999999;
				}
			}
			.all-reply {
				padding: 20rpx;
				display: flex;
				color: #5677fc;
				align-items: center;
				.more {
					margin-left: 6rpx;
				}
			}
		}
		.bottom {
			display: flex;
			font-size: 24rpx;
			color: #9a9a9a;
			.reply {
				color: #5677fc;
				margin-left: 10rpx;
			}
		}
	}
}

    .album {
        @include flex;
        align-items: flex-start;
		margin-top: 10px;
		width:100%;
	.left {
		width: 32px;
	}
        &__content {
            margin-right: 10px;
			margin-left: 10px;
            flex: 12;
         }
    }
</style>
